<!--
 * @Author: wangming
 * @Date: 2020-09-08 21:08:04
 * @LastEditors: wangming
 * @LastEditTime: 2022-05-06 13:46:00
 * @Description: 基础设置
-->
<template>
  <div>
    <!-- {{ form.tagName }} -->
    <div class="basetitle">
      <el-divider :title="form.name"
        ><span class="text-eps">{{ form.name }}</span></el-divider
      >
      <el-form-item label="唯一标识">
        <span class="b mr10 text-eps" :title="form.key"> {{ form.key }}</span>
        <el-button
          type="text"
          @click="copy(form.key)"
          icon="el-icon-document-copy"
        ></el-button>
      </el-form-item>
      <el-form-item label="组件别名" v-if="isShowAlias">
        <el-input v-model="form.__config.aliasName"></el-input>
      </el-form-item>
    </div>
    <!--//////////////////////////////////////////////////////////////// 基础设置 -->
    <div v-if="basicsSettingTagList.length > 0">
      <el-divider>基础设置</el-divider>
      <component
        v-model="form"
        v-for="(i, index) in basicsSettingTagList"
        :key="index"
        :is="i"
      ></component>
    </div>
    <!--//////////////////////////////////////////////////////////////// 高级设置 -->
    <div v-if="seniorSettingTag.length > 0">
      <el-divider>高级设置</el-divider>
      <component
        v-model="form"
        v-for="(i, index) in seniorSettingTag"
        :key="index"
        :is="i"
      ></component>
    </div>
    <!--//////////////////////////////////////////////////////////////// 样式 -->
    <div v-if="layoutSettingTag.length > 0">
      <el-divider>样式</el-divider>
      <component
        v-model="form"
        v-for="(i, index) in layoutSettingTag"
        :key="index"
        :is="i"
      ></component>
    </div>
    <div v-if="echartsSettingTag.length > 0">
      <el-divider>图表设置</el-divider>
      <component
        v-model="form"
        v-for="(i, index) in echartsSettingTag"
        :key="index"
        :is="i"
      ></component>
    </div>
  </div>
</template>

<script>
import myMixin from "./myMixin";
import basiceModule from "./components";
import searchConfigCom from "./components/hlSearch/_components/index";
import { desigconfig } from "@/pageConfig/index.js";

export default {
  mixins: [myMixin],
  components: { ...basiceModule, ...searchConfigCom },
  props: {
    basicsConfig: {
      type: Object,
      default: () => ({}),
    },
  },
  computed: {
    basicsSettingTagList() {
      return this.basicsConfig[this.form.tagName]?.basicsSettingTag || [];
    },
    layoutSettingTag() {
      return this.basicsConfig[this.form.tagName]?.layoutSettingTag || [];
    },
    seniorSettingTag() {
      return this.basicsConfig[this.form.tagName]?.seniorSettingTag || [];
    },
    echartsSettingTag() {
      return this.basicsConfig[this.form.tagName]?.echartsSettingTag || [];
    },
    isShowAlias() {
      return this.desigconfig[this.form.tagName];
    },
  },
  watch: {},
  data() {
    return {
      desigconfig,
    };
  },
  methods: {
    copy(text) {
      const input = document.createElement("input");
      document.body.appendChild(input);
      input.setAttribute("value", text);
      input.select(); // 选中文本
      document.execCommand("copy");
      document.body.removeChild(input);
      this.$message.success("复制成功");
    },
  },
};
</script>

<style lang="scss" scoped>
.text-eps {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
::v-deep .el-form-item--mini.el-form-item,
.el-form-item--small.el-form-item {
  margin-bottom: 10px;
}
.basetitle {
  ::v-deep .el-divider__text {
    span {
      display: inline-block;
      max-width: 145px;
    }
  }
  ::v-deep .el-form-item__content {
    span {
      display: inline-block;
      max-width: 195px;
      vertical-align: middle;
    }
  }
}
</style>
